<template>
	<view class="main-container">
		<view class="history-section" v-for="paper in paperHistory" @click="getDetail(paper)">
			<view class="paper-description">
				<text>试卷名：{{paper.paperName}}</text>
			</view>
			<view class="paper-description">
				<text>开始时间：{{(paper.beginTime == null) ? '无': paper.beginTime}}</text>
			</view>
			<view class="paper-description">
				<text>结束时间：{{(paper.endTime == null) ? '无': paper.endTime}}</text>
			</view>
			<view class="paper-description"></view>
		</view>
		<uni-popup ref="popup" type="center" :animation="true" class="popup-box">
			<view class="detail-wrapper">
				<view class="detail-description" v-for="text in paperDetails">
					<text >{{text}}</text>
				</view>
				
			</view>	
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app';
	const token = ref(getApp().globalData.userToken);
	const paperHistory = ref([])
	const getHistory = () =>{
		uni.request({
		    url: 'http://localhost:11000/courseSystem/donePaper/getDonePapers', 
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
		    success: (res) => {
				paperHistory.value = res.data.data
				console.log(paperHistory.value[0])
		    }
		});
	}
	onShow(() =>{
		console.log(token.value)
		getHistory()
	})
	const popup = ref(null)
	const paperName = ref('')
	const paperDetails = ref([])
	const getDetail = (paper) =>{
		console.log(paper.id)
		paperDetails.value = [];
		paperDetails.value.push("试卷名：" + paper.paperName)
		paperDetails.value.push("开始时间：" + paper.beginTime)
		paperDetails.value.push("结束时间：" + paper.endTime)
		paperDetails.value.push("总分：" + paper.totalScore)
		paperDetails.value.push("实际得分：" + paper.actualScore)
		paperDetails.value.push("教师姓名：" + paper.teacherName)
		console.log(paperDetails.value)
		popup.value.open()
		uni.request({
		    url: 'http://localhost:11000/courseSystem/doDonePaperDetail/' + paper.id, 
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
		    success: (res) => {
				console.log(paperHistory.value)
		    }
		});
	}
</script>

<style>
	.main-container{
		fonst-size: 40rpx;
	}
	.page-title{
		margin: 25%;
	}
	.history-section{
		border-bottom-style: solid;
		border-width: 1rpx;
		padding: 32rpx;
	}
	.detail-wrapper{
		width: 500rpx;
		height: 800rpx;
		border-radius: 36rpx;
		background-color: white;
		padding: 48rpx;
	}
</style>
